const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');

// 将css提取到单独的文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

const { Template } = require('webpack');
module.exports = {
    entry: './src/main.js', //入口文件
    output: {
        path: path.resolve(__dirname, 'dist'), //输出的路径地址
        filename: 'bundle.js', //修改输出文件名
    },

    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html' // 以public路径下的HTML文件为模板
        }),
        new MiniCssExtractPlugin()
    ],

    module: { // 放的是加载器
        rules: [{ //配置css规则
                test: /\.css$/i,
                use: [MiniCssExtractPlugin.loader, "css-loader"], //自右向左执行
            },


            { //配置less规则
                test: /\.less$/i,
                use: [ // compiles Less to CSS
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    "less-loader",
                ],
            },

            { // 图片
                test: /\.(gif|png|jpg|jpeg)/,
                type: 'asset',
            },

            { //字体图标
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                type: 'asset/resource',
                generator: { //生成文字名字规则
                    filename: 'fonts/[name].[hash:6][ext]'
                }
            },

            { //  降级配置规则
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/, //不再匹配
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },


        ],
    },
};